<template>
	<div>
		<header>
			<ul>
				<li @click="nav_click('business')" >业务总览</li>
				<li @click="nav_click('money')"  :class='{isActive: true}'>收支总览</li>
				<li @click="nav_click('achievement')">绩效总览</li>
			</ul>
		</header>
		<div class="container" :style="{height: heightClient}">
			<div class="container_top">
				<ul>
					<li :class="{topActive: tabShow}" @click="tab('all')">
						<span></span>
						<span>全院收支</span>
					</li>
					<li :class="{topActive: !tabShow}" @click="tab('hospital')">
						<span></span>
						<span>医疗收支</span>
					</li>
				</ul>
			</div>
			<div class="container_first">
				<div class="all_income"	v-show="tabShow">
					<div class="come">
						<div class="come_title">
							<span>全院收入(万元)</span><br>
							<span>累积：</span>
							<span>{{hosTotalNum}}</span><br>
						</div>
						<div ref="allInc" style="width: calc(100% - 10px);height: calc(100% - 90px);"></div>
					</div>
					<div ref="allincome" style="width: calc(100% - 215px);height: calc(100% - 10px); padding:5px;"></div>
				</div>
				<div class="all_output" v-show="tabShow">
					<div class="come">
						<div class="come_title">
							<span>全院支出(万元)</span><br>
							<span>累积：</span>
							<span>{{hosTotalOut}}</span><br>
						</div>
						<div ref="allOut" style="width: calc(100% - 10px);height: calc(100% - 90px);"></div>
					</div>
					<div ref="alloutput" style="width: calc(100% - 215px);height: calc(100% - 10px); padding:5px;"></div>
				</div>
				<div class="hos_income" v-show="!tabShow">
					<div class="come">
						<div class="come_title">
							<span>医疗收入(万元)</span><br>
							<span>累积：</span>
							<span>{{treaInc}}</span><br>
						</div>
						<div ref="hosInc" style="width: calc(100% - 10px);height: calc(100% - 90px);"></div>
					</div>
					<div ref="hosincome" style="width: calc(100% - 215px);height: calc(100% - 10px); padding:5px;"></div>
				</div>
				<div class="hos_output" v-show="!tabShow">
					<div class="come">
						<div class="come_title">
							<span>医疗支出(万元)</span><br>
							<span>累积：</span>
							<span>{{treaOut}}</span><br>
						</div>
						<div ref="hosOut" style="width: calc(100% - 10px);height: calc(100% - 90px);"></div>
						
					</div>
					<div ref="hosoutput" style="width: calc(100% - 215px);height: calc(100% - 10px); padding:5px;"></div>
				</div>
				<div class="all_rest">
					<div class="come" style="padding-left: 0; ">
						<div class="come_title">
							<span>{{valueRest}}(万元)</span><br>
							<span>累积：</span>
							<span>{{LeftTotal}}</span><br>
						</div>
						<div ref="emeLeft" style="width: calc(100% - 10px);height: calc(100% - 120px);"></div>
						<!-- <div class="come_t">
							<span>{{valueRest}}(万元)</span><br>
							<span>(本月)</span><br>
							<span>{{hosLeftTotalThisMonths}}</span><br>
							<span :style="{color: !hosLeftTotalTrend ?'#89D769':'#EC7676'}">{{percentage}}</span>
							<span v-if="hosLeftTotalTrend"><img src="./../assets/asc.png"></span>
							<span v-else="!hosLeftTotalTrend"><img src="./../assets/desc.png"></span>
						</div>
						<div class="come_c">
								<span>同期</span>
								<span>{{hosLeftTotalSamePeriods}}</span>
								
						</div> -->
						<div class="come_r">
							<span>{{restRateTitle}}</span>
							<span :style="{color: (Number(this.rate.replace('%','')) > 0) > 0 ?'#EC7676':'#89D769'}">{{rate}}</span>
							<el-tooltip class="item" effect="dark" placement="top" :visible-arrow="false">
								<div slot="content">医疗口径同比 =（本期【医疗口径<br/>结余率】-同期【医疗口径结余<br/>率】）/同期【医疗口径结余率】</div>
      							<span style="font-size: 13px;color: #6A6A6A;cursor: pointer;">{{rateIncr}}</span>
    						</el-tooltip>
							<span v-if="Number(this.rate.replace('%','')) > 0"><img src="./../assets/asc.png"></span>
							<span v-else><img src="./../assets/desc.png"></span>
						</div>

					</div>
				</div>
			</div>
			<div class="container_second" v-show="tabShow">
				<div class="second_title">
					收支走势图
				</div>
				<div ref="incomeTrend" style="height: 90%;width: 100%;"></div>
			</div>
			<div class="container_second" v-show="!tabShow">
				<div class="second_title">
					收支走势图
				</div>
				<div ref="hosIncomeTrend" style="height: 90%;width: 100%;"></div>
			</div>
		</div>
	</div>
</template>
<script>
	import echarts from 'echarts'
	import axios from 'axios'
	export default {
		data () {
			return {
				heightClient: '0px',
				tabShow: true,
				// month: '2018-01',
				valueRest: '全院结余',
				typeValue: 'hospital',
				percentage: '',
				// emeInc: "", //门诊收入
				restRateTitle: '',
				restHosTitle: '可分配结余率',
				restEmeTitle: '可分配结余率',
				rate: '',
				rateIncr: '',//同比增长
				emeLeftRateIncr: '',
				leftRateIncr: '',
				LeftTotal: "",//结余
				hosTotalNum: "", //全院收入（累计值）
				hosTotalOut: "", //全院支出（累计值）
				hosLeftTotal: "", //全运结余（累计值）
				treaInc: "", //医疗收入（累计值）
				treaOut: "", //医疗支出（累计值）
				emeLeft: "", //医疗结余（累计值）
				emeLeftRate: "", //医疗结余增长率
				leftRate: "", //可分配结余增长率
				emeLeftThisMonth: "", //医疗结余本月
				emeLeftSamePeriod: '', //医疗结余同期
				treaIncThisMonth: "", //医疗收入本月
				treaOutThisMonth: "", //医疗支出本月
				treaIncSamePeriod: "", //医疗收入同期
				treaOutSamePeriod: "", //医疗支出同期
				percentageHosIn: "", //医疗收入幅度百分比
				percentageHosOut: "", //医疗支出幅度百分比
				percentageHosRest: "", //医疗结余幅度百分比
				hosLeftTotalThisMonth: "", //全院结余本月
				hosTotalNumThisMonth: "", //全院收入本月
				hosTotalOutThisMonth: "", //全院支出本月
				hosLeftTotalSamePeriod: "", //全院结余同期
				hosTotalNumSamePeriod: "", //全院收入同期
				hosTotalOutSamePeriod: "", //全院支出同期
				percentageYuanIn: "", //全院收入幅度百分比
				percentageYuanOut: "", //全院支出幅度百分比
				percentageYuanRest: "", //全院结余幅度百分比
				hosLeftTotalSamePeriods: "",
				hosLeftTotalThisMonths: " ",
				hosTotalNumTrend: true, //全院收入趋势
				hosTotalOutTrend: true, //全院支出趋势
				hosLeftTotalTrend: true, //全院结余趋势
				treaIncTrend: true,  //医疗收入趋势
				treaOutTrend: true,  //医疗支出趋势
				emeLeftTrend: true, //医疗结余趋势
				treatmentIncomeTrend: [], //医疗收入信息
				treatmentIncomeTrendSamePeriod: [],//同期医疗信息
				hosOptionsIncomeTrend: {
				 	tooltip: {
			        	trigger: 'axis'
			    	},
				    legend: {
				    	itemWidth: 12,
				    	
				        data:[
					        {
					        	icon: 'circle',
					        	name: '本月医疗收入'
					        },
					        {
					        	icon: 'circle',
					        	name: '本月医疗支出'
					        },
					        {
					        	icon: 'circle',
					        	name: '本月医疗结余'
					        },
					        {
					        	icon: 'circle',
					        	name: '同期医疗收入'
					        },
					        {
					        	icon: 'circle',
					        	name: '同期医疗支出'
					        },
					        {
					        	icon: 'circle',
					        	name: '同期医疗结余'
					        }
				        ],
				        top: '2%',
				        right: '5%'
				    },
				    grid: {
				        left: '3%',
				        right: '3%',
				        top: '15%',
				        bottom: '10%',
				        containLabel: true
				    },
				    // toolbox: {
				    //     feature: {
				    //         saveAsImage: {}
				    //     }
				    // },
				    xAxis: [{
				        type: 'category',
				        boundaryGap: ['3%', '5%'],
				        data: [],
				        axisTick: {
				        	show: false
				        },
				        axisLine: {
				        	show: false
				        }
				    },{
				        type: 'category',
				        boundaryGap: ['3%', '5%'],
				        data: [],
				        axisTick: {
				        	show: false
				        },
				        axisLine: {
				        	show: false
				        },
				        axisLabel: {
				        	show: false
				        }
				    },
				    ],
				    yAxis:[ 
					    {	
					    	// max: 600000,
					    	// min: 0,
					        type: 'value',
					        axisTick: {
					        	show: false
					        },
					        axisLine: {
					        	show: true,
					        	lineStyle: {
				            		color: '#4150C8'
				            	}
					        },
					        axisLabel: {
					        	textStyle: {
								    color: '#4150C8'
								},
				                formatter: function(value) {
				                	if (parseInt(value) > 1000) {
				                		return parseInt(value)/1000 + 'K'
				                	} else if(parseInt(value) < -1000) {
				                		return parseInt(value)/1000 + 'K'
				                	}
				                	return value
				                }
				            },
					        splitLine: {
					        	show: true,
					        	lineStyle: {
					        		type: 'solid',
					        		color: '#C8CBE6'
					        	}
					        }
					    },
					    {
					    	// max: 60000,
					    	// min: 0,
					        type: 'value',
					        axisTick: {
					        	show: false
					        },
					        axisLine: {
					        	show: true,
					        	lineStyle: {
					        		color: '#FF803A'
					        	}
					        },
					        axisLabel: {
					        	textStyle: {
								    color: '#B4AFF0'
								},
				                formatter: function(value) {
				                	if (parseInt(value) > 1000) {
				                		return parseInt(value)/1000 + 'K'
				                	} else if(parseInt(value) < -1000) {
				                		return parseInt(value)/1000 + 'K'
				                	}
				                	return value
				                }
				            },
					        splitLine: {
					        	show: true,
					        	lineStyle: {
					        		type: 'dashed',
					        		color: '#F5CAB2'
					        	}
					        }
					    }
				    ],
				    series: [
				        {
				            name:'本月医疗收入',
				            type:'bar',
				            // stack: '收入',
				            barWidth: 20,
				            
				            data:[],
				            itemStyle: {
				            	normal: {
				            		color: '#599CF0'
				            	}
				            }
				        },
				        {
				            name:'本月医疗支出',
				            type:'bar',
				            // stack: '支出',
				            barWidth: 20,
				            
				            data:[],
				            itemStyle: {
				            	normal: {
				            		color: '#8983D2'
				            	}
				            }
				        },
				        {
				            name:'本月医疗结余',
				            type:'line',
				            yAxisIndex: 1,
				            
				            data:[],
				            itemStyle: {
				            	normal: {
				            		color: '#F6CA80'
				            	}
				            }
				        },
				        {
				            name:'同期医疗收入',
				            type:'bar',
				            // stack: '收入',
				           	barWidth: 2,
				           	xAxisIndex: 1,
				            label: {
				            	show: true,
				            	formatter: ' ',
				            	position:  'top',
				            	distance: 0,
				            	backgroundColor: {
				            		image: ''
				            	},
				            	width: 10,
				            	height: 10,
				            	rich: {}
				            },
				            data:[],
				            itemStyle: {
				            	normal: {
				            		color: '#64CEC7'
				            	}
				            }
				        },
				        {
				            name:'同期医疗支出',
				            type:'bar',
				            // stack: '支出',
				           	barWidth: 2,
				           	xAxisIndex: 1,
				           	label: {
				            	show: true,
				            	formatter: ' ',
				            	position:  'top',
				            	distance: 0,
				            	backgroundColor: {
				            		image: ''
				            	},
				            	width: 10,
				            	height: 10,
				            	rich: {}
				            },
				            barGap: '11px',
				            data:[],
				            itemStyle: {
				            	normal: {
				            		color: '#E797AB'
				            	}
				            }
				        },
				        {
				            name:'同期医疗结余',
				            type:'line',
				            xAxisIndex: 1,
				            // stack: '总量',
				            data:[],
				            yAxisIndex: 1,
				            itemStyle: {
				            	normal: {
				            		color: '#FF803A'
				            	}
				            }
				        }
				    ]
				},
				optionsIncomeTrend: {
				 	tooltip: {
			        	trigger: 'axis'
			    	},
				    legend: {
				    	itemWidth: 12,
				    	
				        data:[
					        {
					        	icon: 'circle',
					        	name: '本月全院收入'
					        },
					        {
					        	icon: 'circle',
					        	name: '本月全院支出'
					        },
					        {
					        	icon: 'circle',
					        	name: '本月全院结余'
					        },
					        {
					        	icon: 'circle',
					        	name: '同期全院收入'
					        },
					        {
					        	icon: 'circle',
					        	name: '同期全院支出'
					        },
					        {
					        	icon: 'circle',
					        	name: '同期全院结余'
					        }
				        ],
				        top: '2%',
				        right: '5%'
				    },
				    grid: {
				        left: '3%',
				        right: '3%',
				        top: '15%',
				        bottom: '10%',
				        containLabel: true
				    },
				    // toolbox: {
				    //     feature: {
				    //         saveAsImage: {}
				    //     }
				    // },
				    xAxis: [{
				        type: 'category',
				        boundaryGap: ['3%', '5%'],
				        data: [],
				        axisTick: {
				        	show: false
				        },
				        axisLine: {
				        	show: false
				        }
				    },{
				        type: 'category',
				        boundaryGap: ['3%', '5%'],
				        data: [],
				        axisTick: {
				        	show: false
				        },
				        axisLine: {
				        	show: false
				        },
				        axisLabel: {
				        	show: false
				        }
				    },
				    ],
				    yAxis:[ 
					    {	
					    	// max: 600000,
					    	// min: 0,
					        type: 'value',
					        axisTick: {
					        	show: false
					        },
					        axisLine: {
					        	show: true,
					        	lineStyle: {
				            		color: '#4150C8'
				            	}
					        },
					        axisLabel: {
					        	textStyle: {
								    color: '#4150C8'
								},
				                formatter: function(value) {
				                	if (parseInt(value) > 1000) {
				                		return parseInt(value)/1000 + 'K'
				                	} else if(parseInt(value) < -1000) {
				                		return parseInt(value)/1000 + 'K'
				                	}
				                	return value
				                }
				            },
					        splitLine: {
					        	show: true,
					        	lineStyle: {
					        		type: 'solid',
					        		color: '#C8CBE6'
					        	}
					        }
					    },
					    {
					    	// max: 60000,
					    	// min: 0,
					        type: 'value',
					        axisTick: {
					        	show: false
					        },
					        axisLine: {
					        	show: true,
					        	lineStyle: {
					        		color: '#FF803A'
					        	}
					        },
					        axisLabel: {
					        	textStyle: {
								    color: '#F16B2A'
								},
				                formatter: function(value) {
				                	if (parseInt(value) > 1000) {
				                		return parseInt(value)/1000 + 'K'
				                	} else if(parseInt(value) < -1000) {
				                		return parseInt(value)/1000 + 'K'
				                	}
				                	return value
				                }
				            },
					        splitLine: {
					        	show: true,
					        	lineStyle: {
					        		type: 'dashed',
					        		color: '#F5CAB2'
					        	}
					        }
					    }
				    ],
				    series: [
				        {
				            name:'本月全院收入',
				            type:'bar',
				            // stack: '收入',
				            barWidth: 20,
				            
				            data:[],
				            itemStyle: {
				            	normal: {
				            		color: '#599CF0'
				            	}
				            }
				        },
				        {
				            name:'本月全院支出',
				            type:'bar',
				            // stack: '支出',
				            barWidth: 20,
				            
				            data:[],
				            itemStyle: {
				            	normal: {
				            		color: '#8983D2'
				            	}
				            }
				        },
				        {
				            name:'本月全院结余',
				            type:'line',
				            yAxisIndex: 1,
				            
				            data:[],
				            itemStyle: {
				            	normal: {
				            		color: '#F6CA80'
				            	}
				            }
				        },
				        {
				            name:'同期全院收入',
				            type:'bar',
				            // stack: '收入',
				           	barWidth: 2,
				           	xAxisIndex: 1,
				            label: {
				            	show: true,
				            	formatter: ' ',
				            	position:  'top',
				            	distance: 0,
				            	backgroundColor: {
				            		image: ''
				            	},
				            	width: 10,
				            	height: 10,
				            	rich: {}
				            },
				            data:[],
				            itemStyle: {
				            	normal: {
				            		color: '#64CEC7'
				            	}
				            }
				        },
				        {
				            name:'同期全院支出',
				            type:'bar',
				            // stack: '支出',
				           	barWidth: 2,
				           	xAxisIndex: 1,
				           	label: {
				            	show: true,
				            	formatter: ' ',
				            	position:  'top',
				            	distance: 0,
				            	backgroundColor: {
				            		image: ''
				            	},
				            	width: 10,
				            	height: 10,
				            	rich: {}
				            },
				            barGap: '11px',
				            data:[],
				            itemStyle: {
				            	normal: {
				            		color: '#E797AB'
				            	}
				            }
				        },
				        {
				            name:'同期全院结余',
				            type:'line',
				            xAxisIndex: 1,
				            // stack: '总量',
				            data:[],
				            yAxisIndex: 1,
				            itemStyle: {
				            	normal: {
				            		color: '#FF803A'
				            	}
				            }
				        }
				    ]
				},
				optionsAllOut: {
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						top: '10%',
						left: '5%',
						right: '5%',
						bottom: '15%'
					},
					xAxis: {
						type: 'category',
						data: ['本月','同期'],
						axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            }
					},
					yAxis: {
			            type: 'value',
			            show: false
					},
					series: [
				        {	
				        	name: '全院支出',
				            type:'bar',
				            barWidth: 21,
				            data: [
				            	{
				            		value: 0,
				            		itemStyle: {
					            		color: '#8983D2'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#776EE3'
						            	}
					            	}
					            },
					            {
				            		value: 0,
				            		itemStyle: {
					            		color: '#E797AB'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#F07E9B'
						            	}
					            	}
					            },
				            	
				            ],
				            label: {
				            	show: true,
				            	position: 'top',
				            	color: '#B0B0B0',
				            	 formatter: function(params) {
				            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
				            	},
				            },
				            
				        },
				        
				    ] 
				},
				optionsAlloutput: {

					backgroundColor: '#f6f6f6',
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				                show: false
				            },
				    },
				    grid: {
				    	top: '12%'
				    },
				    legend: {
				    	itemWidth: 12,
				    	top: '3%',
				    	right: '3%',
				        data:[
				        	{
				        		icon: 'circle',
				        		name: '本月'
				        	},
				        	{
				        		icon: 'circle',
				        		name: '同期'
				        	}
				        ]
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: ['医疗业务成本','管理费用','其他支出','财政项目补助支出','科教项目支出'],
				            axisTick: {
				            	show: false
				            },
				            axisLine: {
				            	show: true,
				            	lineStyle: {
				            		color: '#E5E5E5'
				            	}
				            },
				            axisLabel: {
				            	interval: 0,
				            	color: '#5D5D5D',
				            	formatter:function(params){
							        	var newParamsName = "";// 最终拼接成的字符串
										    var paramsNameNumber = params.length;// 实际标签的个数
										    var provideNumber = 4;// 每行能显示的字的个数
										    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
										    /**
										     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
										     */
										    // 条件等同于rowNumber>1
										    if (paramsNameNumber > provideNumber) {
										        /** 循环每一行,p表示行 */
										        for (var p = 0; p < rowNumber; p++) {
										            var tempStr = "";// 表示每一次截取的字符串
										            var start = p * provideNumber;// 开始截取的位置
										            var end = start + provideNumber;// 结束截取的位置
										            // 此处特殊处理最后一行的索引值
										            if (p == rowNumber - 1) {
										                // 最后一次不换行
										                tempStr = params.substring(start, paramsNameNumber);
										            } else {
										                // 每一次拼接字符串并换行
										                tempStr = params.substring(start, end) + "\n";
										            }
										            newParamsName += tempStr;// 最终拼成的字符串
										        }

										    } else {
										        // 将旧标签的值赋给新标签
										        newParamsName = params;
										    }
										    //将最终的字符串返回
										    return newParamsName
							        }
				            }
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
				            axisLabel: {
				                formatter: '{value}'
				            },
				            show: false
				        },
				        {
				            type: 'value',
				            show: false
				        }
				    ],
				    series: [
				        {
				            name:'本月',
				            type:'bar',
				            barWidth: 8,
				            data: [],
				            itemStyle: {
				            	normal: {
				            		color: '#8983D2',
				            		barBorderRadius: [2, 2, 0, 0]
				            	}
				            },
				            emphasis: {
				            	itemStyle: {
				            		color: '#776EE3'
				            	}
				            }
				        },
				        {
				            name:'同期',
				            type:'bar',
				            barWidth: 8,
				            data: [],
				            itemStyle: {
				            	normal: {
				            		color: '#E797AB',
				            		barBorderRadius: [2, 2, 0, 0]
				            	}
				            },
				            emphasis: {
				            	itemStyle: {
				            		color: '#F07E9B'
				            	}
				            }
				        }
				    ] 
				},
				optionsAllInc: {
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						top: '10%',
						left: '5%',
						right: '5%',
						bottom: '15%'
					},
					xAxis: {
						type: 'category',
						data: ['本月','同期'],
						axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            }
					},
					yAxis: {
			            type: 'value',
			            show: false
					},
					series: [
				        {	
				        	name: '全院收入',
				            type:'bar',
				            barWidth: 21,
				            data: [
				            	{
				            		value: 0,
				            		itemStyle: {
					            		color: '#599CF0'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#2483FA'
						            	}
					            	}
					            },
					            {
				            		value: 0,
				            		itemStyle: {
					            		color: '#64CEC7'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#20D6CA'
						            	}
					            	}
					            },
				            	
				            ],
				            label: {
				            	show: true,
				            	position: 'top',
				            	color: '#B0B0B0',
				            	 formatter: function(params) {
				            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
				            	},
				            },
				            
				        },
				    ] 
				},
				optionsAllincome: {
				backgroundColor: '#f6f6f6',
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            show: false
			        },
			    },
			    grid: {
			    	top: '12%',
			    	left: '0',
			    	right: '0'
			    },
			    legend: {
			    	itemWidth: 12,
			    	top: '3%',
			    	right: '3%',
			        data:[
			        	{
			        		icon: 'circle',
			        		name: '本月'
			        	},
			        	{
			        		icon: 'circle',
			        		name: '同期'
			        	}
			        ]
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: ['医疗收入','财政基本补助','财政项目补助','科教项目', '其他收入'],
			            
			            axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            	formatter:function(params){
						        	var newParamsName = "";// 最终拼接成的字符串
									    var paramsNameNumber = params.length;// 实际标签的个数
									    var provideNumber = 4;// 每行能显示的字的个数
									    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
									    /**
									     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
									     */
									    // 条件等同于rowNumber>1
									    if (paramsNameNumber > provideNumber) {
									        /** 循环每一行,p表示行 */
									        for (var p = 0; p < rowNumber; p++) {
									            var tempStr = "";// 表示每一次截取的字符串
									            var start = p * provideNumber;// 开始截取的位置
									            var end = start + provideNumber;// 结束截取的位置
									            // 此处特殊处理最后一行的索引值
									            if (p == rowNumber - 1) {
									                // 最后一次不换行
									                tempStr = params.substring(start, paramsNameNumber);
									            } else {
									                // 每一次拼接字符串并换行
									                tempStr = params.substring(start, end) + "\n";
									            }
									            newParamsName += tempStr;// 最终拼成的字符串
									        }

									    } else {
									        // 将旧标签的值赋给新标签
									        newParamsName = params;
									    }
									    //将最终的字符串返回
									    return newParamsName
						        }
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            show: false
			        },
			        {
			            type: 'value',
			            show: false
			        }
			    ],
			    series: [
			        {
			            name:'本月',
			            type:'bar',
			            barWidth: 8,
			            data: [],
			            itemStyle: {
			            	normal: {
			            		color: '#599CF0',
			            		barBorderRadius: [2, 2, 0, 0]
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#2483FA'
			            	}
			            }
			        },
			        {
			            name:'同期',
			            type:'bar',
			            barWidth: 8,
			            data: [],
			            itemStyle: {
			            	normal: {
			            		color: '#64CEC7',
			            		barBorderRadius: [2, 2, 0, 0]
			            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#20D6CA'
			            	}
			            }
			        }
			    ] 
				},
				optionsHosInc: {
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						top: '10%',
						left: '5%',
						right: '5%',
						bottom: '15%'
					},
					xAxis: {
						type: 'category',
						data: ['本月','同期'],
						axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            }
					},
					yAxis: {
			            type: 'value',
			            show: false
					},
					series: [
				        {	
				        	name: '医疗收入',
				            type:'bar',
				            barWidth: 21,
				            data: [
				            	{
				            		value: 0,
				            		itemStyle: {
					            		color: '#599CF0'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#2483FA'
						            	}
					            	}
					            },
					            {
				            		value: 0,
				            		itemStyle: {
					            		color: '#64CEC7'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#20D6CA'
						            	}
					            	}
					            },
				            	
				            ],
				            label: {
				            	show: true,
				            	position: 'top',
				            	color: '#B0B0B0',
				            	 formatter: function(params) {
				            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
				            	},
				            },
				            
				        },
				    ] 
				},
				optionsHosIncome: {
					backgroundColor: '#f6f6f6',
				    tooltip: {
				        show: true,
				        trigger: 'item',
				        formatter: ''
				    },
				    grid: {
				    	top: '12%'
				    },
				    legend: {
				    	itemWidth: 12,
				    	top: '3%',
				    	right: '3%',
				        data:[
				        	{
				        		icon: 'circle',
				        		name: '本月'
				        	},
				        	{
				        		icon: 'circle',
				        		name: '同期'
				        	}
				        ]
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: ['住院收入','门诊收入', '财政基本补助'],
				            // axisPointer: {
				            //     type: 'shadow'
				            // },
				            axisTick: {
				            	show: false
				            },
				            axisLine: {
				            	show: true,
				            	lineStyle: {
				            		color: '#E5E5E5'
				            	}
				            },
				            axisLabel: {
				            	// rotate: 20,
				            	interval: 0,
				            	color: '#5D5D5D',
				            	formatter:function(params){
							        	var newParamsName = "";// 最终拼接成的字符串
										    var paramsNameNumber = params.length;// 实际标签的个数
										    var provideNumber = 2;// 每行能显示的字的个数
										    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
										    /**
										     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
										     */
										    // 条件等同于rowNumber>1
										    if (paramsNameNumber > provideNumber) {
										        /** 循环每一行,p表示行 */
										        for (var p = 0; p < rowNumber; p++) {
										            var tempStr = "";// 表示每一次截取的字符串
										            var start = p * provideNumber;// 开始截取的位置
										            var end = start + provideNumber;// 结束截取的位置
										            // 此处特殊处理最后一行的索引值
										            if (p == rowNumber - 1) {
										                // 最后一次不换行
										                tempStr = params.substring(start, paramsNameNumber);
										            } else {
										                // 每一次拼接字符串并换行
										                tempStr = params.substring(start, end) + "\n";
										            }
										            newParamsName += tempStr;// 最终拼成的字符串
										        }

										    } else {
										        // 将旧标签的值赋给新标签
										        newParamsName = params;
										    }
										    //将最终的字符串返回
										    return newParamsName
							        }
				            }
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
				            axisLabel: {
				                formatter: '{value}'
				            },
				            show: false
				        },
				        {
				            type: 'value',
				            show: false
				        }
				    ],
				    series: [
				        {
				            name:'本月',
				            type:'bar',
				            barWidth: 8,
				            data: [],
				            itemStyle: {
				            	normal: {
				            		color: '#599CF0',
				            		barBorderRadius: [2, 2, 0, 0]
				            	}
				            },
				            emphasis: {
				            	itemStyle: {
				            		color: '#2483FA'
				            	}
				            }
				        },
				        {
				            name:'同期',
				            type:'bar',
				            barWidth: 8,
				            data: [],
				            itemStyle: {
				            	normal: {
				            		color: '#64CEC7',
				            		barBorderRadius: [2, 2, 0, 0]
				            	}
				            },
				            emphasis: {
				            	itemStyle: {
				            		color: '#20D6CA'
				            	}
				            }
				        }
				    ] 
				},
				optionsHosOut: {
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						top: '10%',
						left: '5%',
						right: '5%',
						bottom: '15%'
					},
					xAxis: {
						type: 'category',
						data: ['本月','同期'],
						axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            }
					},
					yAxis: {
			            type: 'value',
			            show: false
					},
					series: [
				        {	
				        	name: '医疗支出',
				            type:'bar',
				            barWidth: 21,
				            data: [
				            	{
				            		value: 0,
				            		itemStyle: {
					            		color: '#8983D2'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#776EE3'
						            	}
					            	}
					            },
					            {
				            		value: 0,
				            		itemStyle: {
					            		color: '#E797AB'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#F07E9B'
						            	}
					            	}
					            },
				            	
				            ],
				            label: {
				            	show: true,
				            	position: 'top',
				            	color: '#B0B0B0',
				            	 formatter: function(params) {
				            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
				            	},
				            },
				            
				        },
				    ] 
				},
				optionsHosOutput: {

					backgroundColor: '#f6f6f6',
				    tooltip: {
				        trigger: 'axis',
				       
				    },
				    grid: {
				    	top: '12%',
				    	left: '5%',
				    	right: '0'
				    },
				    legend: {
				    	itemWidth: 12,
				    	top: '3%',
				    	right: '3%',
				        data:[
				        	{
				        		icon: 'circle',
				        		name: '本月'
				        	},
				        	{
				        		icon: 'circle',
				        		name: '同期'
				        	}
				        ]
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: ['人员经费','卫生材料','药品费','固定资产折旧','无形资产摊销', '医疗风险基金', '其他'],
				            // axisPointer: {
				            //     show: false
				            // },
				            axisTick: {
				            	show: false
				            },
				            axisLine: {
				            	show: true,
				            	lineStyle: {
				            		color: '#E5E5E5'
				            	}
				            },
				           axisLabel: {
				            	interval: 0,
				            	color: '#5D5D5D',
				            	formatter:function(params){
							        	var newParamsName = "";// 最终拼接成的字符串
										    var paramsNameNumber = params.length;// 实际标签的个数
										    var provideNumber = 4;// 每行能显示的字的个数
										    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
										    /**
										     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
										     */
										    // 条件等同于rowNumber>1
										    if (paramsNameNumber > provideNumber) {
										        /** 循环每一行,p表示行 */
										        for (var p = 0; p < rowNumber; p++) {
										            var tempStr = "";// 表示每一次截取的字符串
										            var start = p * provideNumber;// 开始截取的位置
										            var end = start + provideNumber;// 结束截取的位置
										            // 此处特殊处理最后一行的索引值
										            if (p == rowNumber - 1) {
										                // 最后一次不换行
										                tempStr = params.substring(start, paramsNameNumber);
										            } else {
										                // 每一次拼接字符串并换行
										                tempStr = params.substring(start, end) + "\n";
										            }
										            newParamsName += tempStr;// 最终拼成的字符串
										        }

										    } else {
										        // 将旧标签的值赋给新标签
										        newParamsName = params;
										    }
										    //将最终的字符串返回
										    return newParamsName
							        }
				            }
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
				            axisLabel: {
				                formatter: '{value}'
				            },
				            show: false
				        },
				        {
				            type: 'value',
				            show: false
				        }
				    ],
				    series: [
					    {
				            name:'本月',
				            type:'bar',
				            barWidth: 8,
				            data: [],
				            itemStyle: {
				            	normal: {
				            		color: '#8983D2',
				            		barBorderRadius: [2, 2, 0, 0]
				            	}
				            },
				            emphasis: {
				            	itemStyle: {
				            		color: '#776EE3'
				            	}
				            }
				        },
				        {
				            name:'同期',
				            type:'bar',
				            barWidth: 8,
				            data: [],
				            itemStyle: {
				            	normal: {
				            		color: '#E797AB',
				            		barBorderRadius: [2, 2, 0, 0]
				            	}
				            },
				            emphasis: {
				            	itemStyle: {
				            		color: '#F07E9B'
				            	}
				            }
				        }
				    ] 
				},
				optionsEmeLeft: {
					tooltip: {
						trigger: 'axis',
					},
					grid: {
						top: '10%',
						left: '5%',
						right: '5%',
						bottom: '18%'
					},
					xAxis: {
						type: 'category',
						data: ['本月','同期'],
						axisTick: {
			            	show: false
			            },
			            axisLine: {
			            	show: true,
			            	lineStyle: {
			            		color: '#E5E5E5'
			            	}
			            },
			            axisLabel: {
			            	interval: 0,
			            	color: '#5D5D5D',
			            }
					},
					yAxis: {
			            type: 'value',
			            show: false
					},
					series: [
				        {	
				        	name: '全院结余',
				            type:'bar',
				            barWidth: 21,
				            data: [
				            	{
				            		value: 0,
				            		itemStyle: {
					            		color: '#F6CA80'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#FECA72'
						            	}
					            	}
					            },
					            {
				            		value: 0,
				            		itemStyle: {
					            		color: '#FF803A'
					            	},
					            	emphasis: {
						            	itemStyle: {
						            		color: '#F16B2A'
						            	}
					            	}
					            },
				            	
				            ],
				            label: {
				            	show: true,
				            	position: 'top',
				            	color: '#B0B0B0',
				            	 formatter: function(params) {
				            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
				            	},
				            },
				            
				        },
				    ] 
				},
			}
		},
		created () {
			this.restRateTitle = this.restEmeTitle
			this.heightClient = document.body.clientHeight - 170 + 'px'
			// this.incomeOverview()
			// this.tab('all')
		},
		props: ['month'],
		watch: {
			month (newV, oldV) {
				this.month = newV
				this.tabShow = true
				this.incomeOverview('all')
				
			}
		},
		mounted () {
			this.incomeOverview('all')
			// var hosIncChart = echarts.init(this.$refs.hosincome) 
			
			// this.myChart = echarts.init(this.$refs.incomeTrend)
			// this.myChart.setOption(this.optionsIncomeTrend)
		},
		methods: {
			number(data) {
	  			if(data != null) {
	  				return data.toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
	  			} else {
	  				return
	  			}
	  		},
			nav_click (type) {
				type === 'money' ? this.$router.push('/income') : type === 'business' ? this.$router.push('/all') : this.$router.push('/jixiaoall')
			},
			reHosInc () {
				return "test"
			},
			tab (type) {
				// this.$nextTick(() => {
					// type === 'all' ? this.tabShow = true : this.tabShow = false
					// this.hosLeftTotalSamePeriods = ''
					
					if (type === 'all') {
						// alert(1)
						this.valueRest = '全院结余'
						this.typeValue = 'hospital'
						this.restRateTitle = this.restEmeTitle
						// this.incomeOverview(type)
						this.rate = this.leftRate
						this.rateIncr = this.leftRateIncr
						this.percentage = this.percentageYuanRest
						this.tabShow = true
						this.LeftTotal = this.number(this.hosLeftTotal)
						//全院结余本月和同期对比
						this.optionsEmeLeft.series[0].data[0].value = this.hosLeftTotalThisMonth
						this.optionsEmeLeft.series[0].data[1].value = this.hosLeftTotalSamePeriod
						this.myChart20 = echarts.init(this.$refs.emeLeft)
						this.myChart20.clear()
						this.myChart20.setOption(this.optionsEmeLeft)
					} else {
						this.hosLeftTotalSamePeriods = ''
						this.valueRest = '医疗结余'
						this.tabShow = false
						this.typeValue = 'treatment'
						this.restRateTitle = this.restHosTitle
						// this.incomeOverview(type)
						this.rate = this.emeLeftRate
						this.rateIncr = this.emeLeftRateIncr
						this.percentage = this.percentageHosRest
						this.LeftTotal = this.number(this.emeLeft)
						//医疗结余本月和同期对比
						this.optionsEmeLeft.series[0].data[0].value = this.emeLeftThisMonth
						this.optionsEmeLeft.series[0].data[1].value = this.emeLeftSamePeriod
						this.myChart20 = echarts.init(this.$refs.emeLeft)
						this.myChart20.clear()
						this.myChart20.setOption(this.optionsEmeLeft)
						this.$nextTick(() => {
							var self = this
							this.myChart3 = echarts.init(this.$refs.hosincome)
							this.myChart3.on("mouseover", function (params) {
								if(params.seriesName == '本月') {
									self.optionsHosIncome.tooltip.formatter = function () {
									var res = ''
									var index = params.dataIndex
									var str = ''
									self.treatmentIncomeTrend.ySub[index].forEach((item,index) => {
										str += '<span style = "display: inline-block;width: 110px; text-align: left;">'+Object.keys(item) +'</span>：'+ self.number(Object.values(item)) + '<br/>'
									})
									res += "<div style='border-bottom: 1px solid #fff'>"+'<span style = "display: inline-block;width: 110px; text-align: left;">'+'本月'+params.name + '</span>：' + self.number(params.value) + "<br/></div>" + "<div>"+str +"</div>"
									return res
									}
								} else {
									self.optionsHosIncome.tooltip.formatter = function () {
									var res = ''
									var index = params.dataIndex
									var str = ''
									self.treatmentIncomeTrendSamePeriod.ySub[index].forEach((item,index) => {
										str += '<span style = "display: inline-block;width: 110px; text-align: left;">'+Object.keys(item) +'</span>：'+ self.number(Object.values(item)) + '<br/>'
									})
									res += "<div style='border-bottom: 1px solid #fff'>"+'<span style = "display: inline-block;width: 110px; text-align: left;">'+'同期'+params.name + '</span>：' + self.number(params.value) + "<br/></div>" + "<div>"+str +"</div>"
									return res
									}
								}
								
							self.myChart3.setOption(self.optionsHosIncome)
							// return
							}) 
							this.myChart3.setOption(this.optionsHosIncome)
							this.myChart4 = echarts.init(this.$refs.hosoutput)
							this.myChart4.setOption(this.optionsHosOutput)
							this.myChart6 = echarts.init(this.$refs.hosIncomeTrend)
							this.myChart6.setOption(this.hosOptionsIncomeTrend)
							this. myChart13 = echarts.init(this.$refs.hosInc)
							this.myChart13.setOption(this.optionsHosInc)
							this. myChart14 = echarts.init(this.$refs.hosOut)
							this.myChart14.setOption(this.optionsHosOut)
						})

					}
				// })
			},
			
 		incomeOverview (type) {
 			// alert(this.month)
          var qs = require('qs');
          var self = this
          axios.post('/service', qs.stringify({"data": JSON.stringify({
              command: 'incomeOverview',
              platform: 'web',
              monthTime: self.month,
              type: self.typeValue
             })}), {
              headers: {
               "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              }
             })
             .then(function (rep) {
              if (rep.data.statusCode === '10001') {
              	
              	var info = rep.data.data.incMonthHos.thisMonth.info
              	var infos = rep.data.data.incMonthHos.samePeriod.info
              	self.emeLeftRateIncr = rep.data.data.incMonthHos.thisMonth.emeLeftRateIncr //医疗结余增长率
				self.leftRateIncr = info.leftRate //可分配结余增长率
				self.emeLeftRate = rep.data.data.incMonthHos.thisMonth.emeLeftRateNew
				self.leftRate = rep.data.data.incMonthHos.thisMonth.hosLeftRate
				self.rate = self.leftRate
				self.rateIncr = self.leftRateIncr
				self.hosTotalNum = self.number(rep.data.data.incMonthHos.thisMonth.hosTotalNum)
				self.hosTotalOut = self.number(rep.data.data.incMonthHos.thisMonth.hosTotalOut)
				self.hosLeftTotal = self.number(rep.data.data.incMonthHos.thisMonth.hosLeftTotal)
				self.treaInc = self.number(rep.data.data.incMonthHos.thisMonth.treaInc)
				self.treaOut = self.number(rep.data.data.incMonthHos.thisMonth.treaOut)
				self.emeLeft = self.number(rep.data.data.incMonthHos.thisMonth.emeLeft)
				self.hosTotalNumThisMonth = self.number(info.hosTotalNum) //全院收入本月
				self.hosTotalOutThisMonth = self.number(info.hosTotalOut)//全院支出本月
				self.treaIncThisMonth = self.number(info.treaInc) //医疗收入本月
				self.treaOutThisMonth= self.number(info.treaOut )//医疗支出本月
				self.hosLeftTotalThisMonth = info.hosLeftTotal //全院结余本月
				self.hosLeftTotalSamePeriod = infos.hosLeftTotal.numerical //全院结余同期
				self.emeLeftThisMonth = info.emeLeft //医疗结余本月
				self.emeLeftSamePeriod = infos.emeLeft.numerical //医疗结余同期	
				self.percentageHosRest = infos.emeLeft.percentage //医疗结余幅度百分比
				self.percentageYuanRest = infos.hosLeftTotal.percentage //全院结余幅度百分比
				
				//全院收入本月同期对比
				self.optionsAllInc.series[0].data[0].value = info.hosTotalNum
				self.optionsAllInc.series[0].data[1].value = infos.hosTotalNum.numerical
				self.myChart11 = echarts.init(self.$refs.allInc)
				self.myChart11.setOption(self.optionsAllInc)
				//全院支出本月同期对比
				self.optionsAllOut.series[0].data[0].value = info.hosTotalOut
				self.optionsAllOut.series[0].data[1].value = infos.hosTotalOut.numerical
				self.myChart11 = echarts.init(self.$refs.allOut)
				self.myChart11.setOption(self.optionsAllOut)
				//医疗收入本月同期数据
				self.optionsHosInc.series[0].data[0].value = info.treaInc
				self.optionsHosInc.series[0].data[1].value = infos.treaInc.numerical
				//医疗支出本月同期数据
				self.optionsHosOut.series[0].data[0].value = info.treaOut
				self.optionsHosOut.series[0].data[1].value = infos.treaOut.numerical
				//全院结余本月同期对比

				self.optionsEmeLeft.series[0].data[0].value = self.hosLeftTotalThisMonth
				self.optionsEmeLeft.series[0].data[1].value = self.hosLeftTotalSamePeriod
				self.myChart20 = echarts.init(self.$refs.emeLeft)
				self.myChart20.clear()
				self.myChart20.setOption(self.optionsEmeLeft)
				if(type === 'all') {
					self.LeftTotal = self.number(self.hosLeftTotal)
					self.percentage = self.percentageYuanRest
				} else {
					self.LeftTotal = self.number(self.emeLeft)
					self.percentage = self.percentageHosRest
				}
				
				// if(type === 'all') {
				// 	self.hosLeftTotalThisMonths = self.hosLeftTotalThisMonth
				// } else {
				// 	self.hosLeftTotalThisMonths = self.emeLeftThisMonth
				// }
				if(infos.hosTotalNum.trend == 'desc') {
					self.hosTotalNumTrend = false
				}
				if(infos.hosTotalOut.trend == 'desc') {
					self.hosTotalOutTrend = false
				}
				if(infos.hosLeftTotal.trend == 'desc') {
					self.hosLeftTotalTrend = false
				}
				if(infos.treaInc.trend == 'desc') {
					self.treaIncTrend = false
				}
				if(infos.treaOut.trend == 'desc') {
					self.treaOutTrend = false
				}
				//全院收入图表
				self.optionsAllincome.xAxis[0].data = rep.data.data.incMonthHos.thisMonth.hospitalIncomeTrend.xData
				self.optionsAllincome.series[0].data = rep.data.data.incMonthHos.thisMonth.hospitalIncomeTrend.yData
				self.optionsAllincome.series[1].data = rep.data.data.incMonthHos.samePeriod.hospitalIncomeTrend.yData
				//医疗收入图表
				self.treatmentIncomeTrend = rep.data.data.incMonthHos.thisMonth.treatmentIncomeTrend
				self.treatmentIncomeTrendSamePeriod = rep.data.data.incMonthHos.samePeriod.treatmentIncomeTrend
				self.optionsHosIncome.xAxis[0].data = rep.data.data.incMonthHos.thisMonth.treatmentIncomeTrend.xData
				self.optionsHosIncome.series[0].data = rep.data.data.incMonthHos.thisMonth.treatmentIncomeTrend.yData
				self.optionsHosIncome.series[1].data = rep.data.data.incMonthHos.samePeriod.treatmentIncomeTrend.yData
				self.myChart1 = echarts.init(self.$refs.allincome)
				self.myChart1.setOption(self.optionsAllincome)
				//全院支出图表
				self.optionsAlloutput.xAxis[0].data = rep.data.data.incMonthHos.thisMonth.hospitalOutlayTrend.xData
				self.optionsAlloutput.series[0].data = rep.data.data.incMonthHos.thisMonth.hospitalOutlayTrend.yData
				self.optionsAlloutput.series[1].data = rep.data.data.incMonthHos.samePeriod.hospitalOutlayTrend.yData
				// outY.forEach((item) => {
				// 	self.optionsAlloutput.series[0].data.push(item)
				// })
				//医疗支出图表
				self.optionsHosOutput.xAxis[0].data = rep.data.data.incMonthHos.thisMonth.treatmentOutlayTrend.xData
				self.optionsHosOutput.series[0].data = rep.data.data.incMonthHos.thisMonth.treatmentOutlayTrend.yData
				self.optionsHosOutput.series[1].data = rep.data.data.incMonthHos.samePeriod.treatmentOutlayTrend.yData
				self.myChart2 = echarts.init(self.$refs.alloutput)
				self.myChart2.setOption(self.optionsAlloutput)
				//全院走势图
				var trendX = rep.data.data.incMonthHos.thisMonth.monthTrend.xData
				var trendXSamePeriod = rep.data.data.incMonthHos.samePeriod.monthTrend.xData
				// trendX.forEach((item) => {
				// 	self.optionsHosOutput.series[0].data.push(item)
				// })
				var yHosTotalNum = [], yHosTotalOut = [], yHosLeftTotal = [], yHosTotalNumS = [], yHosTotalOutS = [], yHosLeftTotalS = []
				var maxHosTotalNum = 0, maxHosTotalOut = 0, maxHosLeftTotal = 0, maxHosTotalNumS = 0, maxHosTotalOutS = 0, maxHosLeftTotalS = 0,minHosTotalNum = 0, minHosTotalOut = 0, minHosLeftTotal = 0, minHosTotalNumS = 0, minHosTotalOutS = 0, minHosLeftTotalS = 0
				self.optionsIncomeTrend.series[0].data = []
				self.optionsIncomeTrend.series[1].data = []
				self.optionsIncomeTrend.series[2].data = []
				self.optionsIncomeTrend.series[3].data = []
				self.optionsIncomeTrend.series[4].data = []
				self.optionsIncomeTrend.series[5].data = []
				self.optionsIncomeTrend.xAxis[0].data = trendX
				self.optionsIncomeTrend.xAxis[1].data = trendXSamePeriod
				yHosTotalNum = rep.data.data.incMonthHos.thisMonth.monthTrend.yHosTotalNum
				yHosTotalOut = rep.data.data.incMonthHos.thisMonth.monthTrend.yHosTotalOut
				yHosLeftTotal = rep.data.data.incMonthHos.thisMonth.monthTrend.yHosLeftTotal
				yHosTotalNumS = rep.data.data.incMonthHos.samePeriod.monthTrend.yHosTotalNum
				yHosTotalOutS = rep.data.data.incMonthHos.samePeriod.monthTrend.yHosTotalOut
				yHosLeftTotalS = rep.data.data.incMonthHos.samePeriod.monthTrend.yHosLeftTotal
				yHosTotalNum.forEach((item) => {
					if (Number(item) > maxHosTotalNum) {
						maxHosTotalNum = Number(item)
					}
					if (Number(item) < minHosTotalNum) {
						minHosTotalNum = Number(item)
					}
					self.optionsIncomeTrend.series[0].data.push(item)
				})
				yHosTotalOut.forEach((item) => {
					if (Number(item) > maxHosTotalOut) {
						maxHosTotalOut = Number(item)
					}
					if (Number(item) < minHosTotalOut) {
						minHosTotalOut = Number(item)
					}
					self.optionsIncomeTrend.series[1].data.push(item)
				})
				yHosLeftTotal.forEach((item) => {
					if (Number(item) > maxHosLeftTotal) {
						maxHosLeftTotal = Number(item)
					}
					if (Number(item) < minHosLeftTotal) {
						minHosLeftTotal = Number(item)
					}
					self.optionsIncomeTrend.series[2].data.push(item)
				})
				yHosTotalNumS.forEach((item) => {
					if (Number(item) > maxHosTotalNumS) {
						maxHosTotalNumS = Number(item)
					}
					if (Number(item) < minHosTotalNumS) {
						minHosTotalNumS = Number(item)
					}
					self.optionsIncomeTrend.series[3].data.push(item)
				})
				yHosTotalOutS.forEach((item) => {
					if (Number(item) > maxHosTotalOutS) {
						maxHosTotalOutS = Number(item)
					}
					if (Number(item) < minHosTotalOutS) {
						minHosTotalOutS = Number(item)
					}
					self.optionsIncomeTrend.series[4].data.push(item)
				})
				yHosLeftTotalS.forEach((item) => {
					if (Number(item) > maxHosLeftTotalS) {
						maxHosLeftTotalS = Number(item)
					}
					if (Number(item) < minHosLeftTotalS) {
						minHosLeftTotalS = Number(item)
					}
					self.optionsIncomeTrend.series[5].data.push(item)
				})
				// var maxArr = [ maxHosTotalNum, maxHosTotalOut, maxHosLeftTotal*10, maxHosTotalNumS, maxHosTotalOutS, maxHosLeftTotalS*10]
				// var minArr = [ minHosTotalNum, minHosTotalOut, minHosLeftTotal*10, minHosTotalNumS, minHosTotalOutS, minHosLeftTotalS*10]
				// self.optionsIncomeTrend.yAxis[0].min = 0 
				// self.optionsIncomeTrend.yAxis[1].min = 0
				// if(Math.floor(Math.min.apply(null,minArr)) < 0) {
				// 	self.optionsIncomeTrend.yAxis[0].min = Math.floor(Math.min.apply(null,minArr)/100000)*100000
				// 	self.optionsIncomeTrend.yAxis[1].min = Math.floor(Math.min.apply(null,minArr)/100000)*10000
				// }
				// self.optionsIncomeTrend.yAxis[0].max = Math.ceil(Math.max.apply(null,maxArr)/100000)*100000
				// self.optionsIncomeTrend.yAxis[1].max = Math.ceil(Math.max.apply(null,maxArr)/100000)*10000
				// console.log(yHosTotalNum, yHosTotalOut, yHosLeftTotal)
				//医疗收支走势图
				var yTreaInc = [], yTreaOut = [], yEmeLeft = [],yTreaIncS = [], yTreaOutS = [], yEmeLeftS = []
				var maxTreaInc = 0, maxTreaOut = 0, maxEmeLeft = 0,maxTreaIncS = 0, maxTreaOutS = 0, maxEmeLeftS = 0,minTreaInc = 0, minTreaOut = 0, minEmeLeft = 0,minTreaIncS = 0, minTreaOutS = 0, minEmeLeftS = 0
				self.hosOptionsIncomeTrend.series[0].data = []
				self.hosOptionsIncomeTrend.series[1].data = []
				self.hosOptionsIncomeTrend.series[2].data = []
				self.hosOptionsIncomeTrend.series[3].data = []
				self.hosOptionsIncomeTrend.series[4].data = []
				self.hosOptionsIncomeTrend.series[5].data = []

				yTreaInc = rep.data.data.incMonthHos.thisMonth.monthTrend.yTreaInc
				yTreaOut = rep.data.data.incMonthHos.thisMonth.monthTrend.yTreaOut
				yEmeLeft = rep.data.data.incMonthHos.thisMonth.monthTrend.yEmeLeft
				yTreaIncS = rep.data.data.incMonthHos.samePeriod.monthTrend.yTreaInc
				yTreaOutS = rep.data.data.incMonthHos.samePeriod.monthTrend.yTreaOut
				yEmeLeftS = rep.data.data.incMonthHos.samePeriod.monthTrend.yEmeLeft
				self.hosOptionsIncomeTrend.xAxis[0].data = trendX
				self.hosOptionsIncomeTrend.xAxis[1].data = trendXSamePeriod
				yTreaInc.forEach((item) => {
					if (Number(item) > maxTreaInc) {
						maxTreaInc = Number(item)
					}
					if (Number(item) < minTreaInc) {
						minTreaInc = Number(item)
					}
					self.hosOptionsIncomeTrend.series[0].data.push(item)
				})
				yTreaOut.forEach((item) => {
					if (Number(item) > maxTreaOut) {
						maxTreaOut = Number(item)
					}
					if (Number(item) < minTreaOut) {
						minTreaOut = Number(item)
					}
					self.hosOptionsIncomeTrend.series[1].data.push(item)
				})
				yEmeLeft.forEach((item) => {
					if (Number(item) > maxEmeLeft) {
						maxEmeLeft = Number(item)
					}
					if (Number(item) < minEmeLeft) {
						minEmeLeft = Number(item)
					}
					self.hosOptionsIncomeTrend.series[2].data.push(item)
				})
				yTreaIncS.forEach((item) => {
					if (Number(item) > maxTreaIncS) {
						maxTreaIncS = Number(item)
					}
					if (Number(item) < minTreaIncS) {
						minTreaIncS = Number(item)
					}
					self.hosOptionsIncomeTrend.series[3].data.push(item)
				})
				yTreaOutS.forEach((item) => {
					if (Number(item) > maxTreaOutS) {
						maxTreaOutS = Number(item)
					}
					if (Number(item) < minTreaOutS) {
						minTreaOutS = Number(item)
					}
					self.hosOptionsIncomeTrend.series[4].data.push(item)
				})
				yEmeLeftS.forEach((item) => {
					if (Number(item) > maxEmeLeftS) {
						maxEmeLeftS = Number(item)
					}
					if (Number(item) < minEmeLeftS) {
						minEmeLeftS = Number(item)
					}
					self.hosOptionsIncomeTrend.series[5].data.push(item)
				})
				// var maxArrHos = [maxTreaInc,maxTreaOut,maxEmeLeft*10,maxTreaIncS,maxTreaOutS,maxEmeLeftS*10]
				// var minArrHos = [minTreaInc,minTreaOut,minEmeLeft*10,minTreaIncS,minTreaOutS,minEmeLeftS*10]
				// self.hosOptionsIncomeTrend.yAxis[0].max = Math.ceil(Math.max.apply(null,maxArrHos)/100000)*100000
				// self.hosOptionsIncomeTrend.yAxis[1].max = Math.ceil(Math.max.apply(null,maxArrHos)/100000)*10000
				// if(Math.floor(Math.min.apply(null,minArrHos)) < 0) {
				// 	self.hosOptionsIncomeTrend.yAxis[0].min = Math.floor(Math.min.apply(null,minArrHos)/100000)*100000
				// 	self.hosOptionsIncomeTrend.yAxis[1].min = Math.floor(Math.min.apply(null,minArrHos)/100000)*10000
				// }
				// self.hosOptionsIncomeTrend.xAxis.data = trendX
				// self.hosOptionsIncomeTrend.series[0].data = yTreaInc
				// self.hosOptionsIncomeTrend.series[1].data = yTreaOut
				// self.hosOptionsIncomeTrend.series[2].data = yEmeLeft
				self.myChart5 = echarts.init(self.$refs.incomeTrend)
				self.myChart5.setOption(self.optionsIncomeTrend)
              } else if (rep.data.statusCode === '10003'){
              	 self.$router.push('/login')
              }
             }).catch(function (error) {
              // console.log(error);
             })
 		}
		}
	}
</script>
<style type="text/css">
	.el-tooltip__popper.is-dark {
		background: rgba(50, 50, 50, 0.7);
		color: #fff;
	}
</style>
<style lang="scss" scoped>
	header {
		width: 100%;
		background: #fff;
		height: 63px;
		display: flex;
		justify-content: center;
		ul{
			height: 63px;
			// margin-left: 30%;
			li {
				float: left;
				line-height: 63px;
				width: 140px;
				text-align: center;
				font-size: 17px;
				color: #646464;
				cursor: pointer;
				&:hover {
					color: #1EA0DD;
				}
			}
		}
		.isActive{
			color: #0385C1 !important;
		}
	}
	.container{
		background: #f8f8f8;
		padding: 1.4%;
		height: 100%;
		.container_top{
			ul{
				display: flex;
				justify-content: flex-end;
				li{
					// height: 13px;
					font-size: 14px;
					margin-right: 20px;
					cursor: pointer;
					span:first-child{
						display: inline-block;
						width: 13px;
						height: 13px;
						border-radius: 2px;
						border: 1px solid #CBCBCB;
						vertical-align: top;
					}
				}
			}
		}
		.container_first, .container_second{
			margin-top: 20px;
			width: 100%;
			// display: flex;
			.come {
				width: 205px;
				height: 100%;
				padding: 10px;
			}
			.come_title {
				width: 185px;
				height:	70px;
				color: #4D4D4D;
				margin-left: 20px;
				// border-bottom: 1px solid #E5E5E5;
				font-size: 25px;
				span {
					display: inline-block;
					font-family: "微软雅黑,PingFangSC";
					height: 30px;
					line-height: 30px;
				}
				span:nth-child(1){
					font-size: 17px;
				}
				span:nth-child(3){
					font-size: 16px;
					color: #9B9B9B;
				}
				span:nth-child(4){
					font-size: 24px;
					color: #4D4D4D;
				}
				
				.unit {
					font-family: "微软雅黑,PingFangSC";
					font-size: 16px;
					color: #9B9B9B;
				}
			}
			.come_t{
				width: 165px;
				height:	60%;
				color: #4D4D4D;
				margin-left: 20px;
				border-bottom: 1px solid #E5E5E5;
				font-size: 25px;
				span {
					display: inline-block;
					font-family: "微软雅黑,PingFangSC";
					height: 30px;
					line-height: 30px;
				}
				span:nth-child(1){
					font-size: 17px;
				}
				span:nth-child(3){
					font-size: 16px;
					color: #9B9B9B;
				}
				span:nth-child(5){
					font-size: 25px;
				}
				span:nth-child(7) {
					font-size: 14px;
					color: #EC7676;
				}
				.unit {
					font-family: "微软雅黑,PingFangSC";
					font-size: 16px;
					color: #9B9B9B;
				}
			}
			.come_c, .come_r{
				line-height: 60px;
				color: #EC7676;
				padding-left: 20px;
				span{
					font-family: "微软雅黑,PingFangSC";
					display: inline-block;
					margin-right: 8px;
					// padding-right: 30px;
				}
				span:first-child{
					color: #9B9B9B;
				}
				span:nth-child(2){
					color: #4D4D4D;
					font-size: 16px;
				}
			}
			.come_r{
				width: 300px;
				line-height: 20px;
				padding-left: 15px;
				span{
					margin-right: 0;
				}
				
			}
		}
		.container_first{
			height: 40%;
			width: 100%;
			display: flex;
			.hos_output{
				width: 51%;
				margin-right: 1%;
				display: flex;
			}
			.hos_income{
				width: 31%;
				margin-right: 1%;
				display: flex;
			}
			.all_income, .all_rest, .all_output, .hos_output, .hos_income{
				background: #fff;
				height: 100%;
				box-shadow: 1px 1px 1px 1px #ccc;
			}
			.all_rest{
				width: 16%;
				.come {
					width: calc(100% - 20px)
				}
			}
			.all_output{	
				width: 39%;
				display: flex;
				margin-right: 1%;
			}
			.all_income{
				width: 43%;
				display: flex;
				margin-right: 1%;
			}
		}
		.container_second{
			width: 100%;
			height: 50%;
			background: #fff;
			box-shadow: 1px 1px 1px 1px #ccc;
			.second_title{
				height: 50px;
				width: 100%;
				line-height: 50px;
				font-size: 17px;
				color: #4D4D4D;
				text-indent: 30px;
			}
		}
		.topActive{
				span:first-child{
					background: #72B8EF !important;
					border-color: #72B8EF !important;
				}
		}
	}
</style>